<template>
  <table class="table">
    <thead>
    <tr>
      <th>序号</th>
      <th>摘要</th>
      <th>会计科目</th>
      <th>借方金额</th>
      <th>贷方金额</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in items">
      <td>{{index+1}}</td>
      <td>{{item.item1}}</td>
      <td>{{item.item2}}</td>
      <td>{{item.item3}}</td>
      <td>{{item.item4}}</td>
      <td>
        <button v-on:click="remove(index)">删除</button>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><input v-model="item.item1"/></td>
      <td><input v-model="item.item2"/></td>
      <td><input v-model="item.item3"/></td>
      <td><input v-model="item.item4"/></td>
      <td>
        <button @click="insert">保存并新增</button>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    data() {
      return {
        item: {'item1': '', 'item2': '', 'item3': '', 'item4': ''},
        items: [
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'},
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'},
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'},
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'},
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'},
          {'item1': '采购', 'item2': '1403原材料 数量：100 单价：100', 'item3': '1000000', 'item4': '0'}
        ]
      }
    },
    methods: {
      insert: function () {
        this.items.push(this.item)
      },
      remove: function (index) {
        this.items.splice(index, 1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  tr, th {
    text-align: center;
  }

  .table {
    width: 100%;
    background: #FAFAFA;
  }

  thead {
    border-radius: 10px;
  }

  thead tr th {
    padding: 30px 0;
    background: #E1E9EF;
    border: 1px solid #C1CED8;
  }

  tbody tr td {
    padding: 30px 0;
    border: 1px solid #C1CED8;
  }

  input {
    width: 80%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    border: 1px solid #C1CED8;
    border-radius: 5px;
  }

  button {
    width: 80%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #C1CED8;
    font-size: 14px;
  }
</style>
